<template>
  <div>
    <div class="head-box">
      <div class="header">
        <div class="left" @click="handleBack">
          <van-icon name="arrow-left" />
          <span>返回</span>
        </div>
        <h1>
          订单详情
          <span class="go">Go</span>
        </h1>
        <div class="right">
          <van-icon name="search" size="18" @click="handleSearch" />
        </div>
      </div>
    </div>
    <!-- 详细订单信息内容Gameorder -->
    <Gameorder />

    <div class="footer">
      <div class="share">
        <van-icon name="share-o" />
        <van-cell title="分享" @click="showShare = true" />
        <van-share-sheet v-model="showShare" title="分享" :options="options" />
      </div>
      <a
        class="share"
        href="tencent://message/?Menu=yes&uin=2748826916&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45"
      >
        <van-icon name="manager-o" />
        <van-cell title="客服" />
      </a>
      <div class="btn">
        <button class="refresh" @click="refresh">找相似</button>
        <button class="take-order-btn" @click="takeOrder">我来代练</button>
      </div>
    </div>
  </div>
</template>

<script>
import { takeorder } from "../api/postOrder.js";
import { mapState } from "vuex";
import Gameorder from "../components/Gameorder.vue";
export default {
  components: {
    Gameorder,
  },

  data() {
    return {
      name: "订单详情",
      showShare: false,
      takeOrderId: null,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  // created() {
  //   console.log(this.$route.params.takeOrderId);
  //   this.takeOrderId = this.$route.params.takeOrderId;
  // },
  computed: {
    ...mapState({
      detailInfo: (state) => state.orderlist.detailInfo,
    }),
  },
  methods: {
    handleBack() {
      console.log(this.takeOrderId);
      console.log("返回");
      location.href = "http://localhost:8080/#/order";
    },
    handleSearch() {
      console.log("搜索");
    },
    onClickLeft() {
      console.log("返回");
    },
    onClickRight() {
      console.log("sou");
    },
    takeOrder() {
      console.log(JSON.parse(localStorage.userInfo).username);

      let info = {
        ...this.detailInfo,
        username: JSON.parse(localStorage.userInfo).username,
      };
      console.log("下单", info);
      takeorder(info).then((res) => {
        console.log(localStorage.name);
        console.log(res);
      });
    },
    refresh() {
      console.log("刷新");
    },
  },
};
</script>

<style src="../assets/css/detail.css" scoped>
</style>
